<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变色</title>
</head>
<body>
    <canvas id="canvas" height="300" width="300" style="border: thin solid black"></canvas>
</body>
<script>
    var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d'),
        //更改本行代码可以更改渐变的方向
        gradient = context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100);

    gradient.addColorStop(0, 'blue');
    gradient.addColorStop(0.25, 'white');
    gradient.addColorStop(0.5, 'purple');
    gradient.addColorStop(0.75, 'red');
    gradient.addColorStop(1, 'yellow');

    context.fillStyle=gradient;
    context.rect(0,0,canvas.width,canvas.height);
    context.fill();
</script>
</html>